<template>
	<div class="login-wrap">
		<img class="logo-img" :src="logo" alt="">

		<div @click="handleToLogin" class="login-btn active-btn">手机号登录</div>

		<div class="agree-xieyi">
			<van-checkbox v-model="checked" icon-size=".28rem" checked-color="#FF6200">
				登录即代表同意<span class="agree-entry" @click="handleToService">《华微谷用户协议》</span>和<span class="agree-entry"
					@click="handleToPrivacy">《华微谷隐私协议》</span>
			</van-checkbox>
		</div>
	</div>
</template>

<script>
import { logo } from '@/tool/static-img';
export default {
	data() {
		return {
			logo,
			checked: false
		}
	},
	methods: {
		handleToLogin() {
			if (!this.checked) {
				this.$toast('请先同意协议');
				return
			}
			this.$router.push({
				name: 'phoneLogin'
			})
		},
		handleToService() {
			this.$router.push({
				name: 'service'
			})
		},
		handleToPrivacy() {
			this.$router.push({
				name: 'privacy'
			})
		}
	}
}
</script>

<style lang="scss">
.login-wrap {
	min-height: 100vh;
	padding-top: 3.12rem;
	padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	background: #ffffff;
	box-sizing: border-box;

	// overflow: hidden;
	.logo-img {
		display: block;
		width: 3.2rem;
		height:auto;
		margin: auto;
	}

	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6.22rem;
		height: 0.88rem;
		margin: auto;
		margin-top: 2.84rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #ffffff;
		border-radius: 0.16rem;
		background: linear-gradient( 270deg, #FD6D17 0%, #FF5E40 100%);
	}

	.agree-xieyi {
		// width: 100%;
		position: absolute;
		// bottom: 0;
		left:0;
		line-height: 0.32rem;
		font-weight: 400;
		font-size: 0.23rem;
		color: #666666;
		text-align: center;
		margin-left: .4rem;
		// width: 92%;
		// position: absolute;
		// left:50%;
		// transform: translateX(-45%);
		// right: 0;
		bottom: calc(0.36rem + constant(safe-area-inset-bottom));
		bottom: calc(0.36rem + env(safe-area-inset-bottom));
		// margin: auto;
		// height: 0.32rem;
		// line-height: 0.32rem;
		// font-weight: 400;
		// font-size: 0.23rem;
		// color: #666666;
		// text-align: center;
	}

	.agree-entry {
		width: 100%;
		color: #FF6200;
	}
}
</style>